<!--热销产品-->
<template>
  <div class="hot-productions">
    <!--面包屑-->
    <div class="crumbs">
      <Crumbs :crumbs_title="crumbs_title"/>
    </div>
    <!--热销产品-->
    <div class="hot-production">
      <div class="hot-production-title">
        <h1 class="h1">HOT BRAND</h1>
        <h2 class="h2">热销商品</h2>
      </div>
      <div class="hot-production-list">
        <div class="shangpin1_1" v-for="product in productList" :key="product.productId" style="margin-left:0px;">
          <div class="spimg" @click="toProductDetail(product.productId)">
            <img style="cursor: pointer" :src="product.picUrl" width="450" height="530"/>
          </div>
          <div class="spdes">
            <div class="spdes1" @click="toProductDetail(product.productId)">
              <div v-text="product.productName.length > 30 ?
              product.productName.slice(0, 30) + '...' : product.productName"
              style="cursor: pointer;"></div>
            </div>
            <div class="spnum">
              <div class="price" v-text="'￥'+ product.price"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--分页-->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="params.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.limit"
      :total="this.totalCount"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import Crumbs from '@/components/Crumbs'
import { getHots } from '../../api/index'

export default {
  name: 'Hot',
  data () {
    return {
      crumbs_title: '热销商品',
      productList: [{
        brandId: 1,
        descript: '',
        isMaster: 1,
        picDesc: '',
        picOrder: 1,
        picStatus: 1,
        picUrl: '',
        price: 99.9,
        productId: 1,
        productName: '',
        saleCount: 100,
        supplierId: 1
      }],
      params: {
        page: 1, // 当前页
        limit: 10 // 一页获取几条数据
      },
      totalCount: 100, // 数据库中一共有多少条数据
      totalPage: 10 // 数据库中按照limit的限制可以分为多少页
    }
  },
  components: {
    Crumbs
  },
  created () {
    this.getHotProduct()
  },
  methods: {
    // 获取热销商品
    getHotProduct () {
      getHots(this.params).then(({ data }) => {
        if (data.code === 0) {
          this.totalCount = data.page.totalCount
          this.totalPage = data.page.totalPage
          this.productList = data.page.list
        }
      }).catch((res) => {
        console.log(res)
      })
    },
    toProductDetail (productId) {
      this.$router.push({ path: `/hot/detail/${productId}` })
    },
    // 一页多少条数数据改变时调用
    sizeChangeHandle (limit) {
      this.params.limit = limit
      this.params.page = 1
      this.getHotProduct()
    },
    // 当前页改变时的回调
    currentChangeHandle (currentPage) {
      this.params.page = currentPage
      this.getHotProduct()
    }
  }
}
</script>

<style scoped lang="less">
.hot-productions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  // event-list
  .hot-production {
    width: 980px;
    margin: 0 auto;
    text-align: left;
    // 标题
    .hot-production-title {
      height: 66px;
      border-bottom: 2px solid #83B8D3;
      font-family: "微软雅黑";
      position: relative;
      margin-bottom: 20px;

      .h1 {
        font-weight: normal;
        font-size: 23px;
        color: #ABBDEB;
        text-transform: uppercase;
        height: 23px;
        line-height: 23px;
      }

      .h2 {
        font-weight: normal;
        font-size: 30px;
        color: #26355B;
        height: 30px;
        line-height: 30px;
        transform: translateY(-25px);
      }
    }

    .hot-production-list {
      .shangpin1_1 {
        width: 475px;
        height: 630px;
        box-sizing: border-box;
        padding: 10px;
        border: 2px solid #e7e7e7;
        float: left;
        margin: 10px 11px;
        display: inline;
        background: #fff;
        font-size: 14px;

        .spdes {
          //display: flex;
          //justify-content: left;
          margin-top: 10px;

          .spdes1 {
            div {
              text-decoration: none;
              color: #666666;
              margin-left: 8px;
              margin-top: 2px;
              display: inline-block;
              font-size: 14px;
            }
          }

          .spnum {
            margin-top: 10px;

            .price {
              font-size: 17px;
            }
          }
        }

      }
    }
  }

  // 分页
  .pagination {
    width: 980px;
    height: 50px;
    margin-top: 50px;
  }
}
</style>
